<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .yidong {
            width: 200px;
            height: 100px;
            background-color: burlywood;
            transform: translate(50px, 20px);
        }
        .other1 {
            width: 200px;
            height: 100px;
            background-color: chartreuse;
        }
        img {
            width: 100px;
            transition: all 1s;
        }
        img:hover {
            transform: rotate(360deg);
        }
        /* 改变旋转的中心点 */
        .xuanzhuan {
            width: 100px;
            height: 100px;
            background-color: coral;
            transition: all 1s;
            transform-origin: 90px 90px;
        }
        .xuanzhuan:hover {
            transform: rotate(360deg);
        }
        .suofang {
            width: 100px;
            height: 100px;
            overflow: hidden;
        }
        .suofang img:hover {
            /* 两个值一样 简写 */
            /* transform: scale(1.5); */
            transform: scale(1.5, 1.5);
        }
        /* 综合写法 */
        .all {
            overflow: hidden;
            width: 200px;
            height: 200px;
            background-color: cornflowerblue;
            transition: all 1s;
        }
        .all:hover {
            /* 顺序不可更改 移动要放在第一个 旋转在一个坐标轴会受影响 */
            transform: translate(100px, 20px) rotate(360deg) scale(1.3, 1.3);
        }
    </style>
</head>
<body>
    <!-- translate 不影响其他盒子 -->
    <div class="yidong"></div>
    <div class="other1"></div>

    <!-- rotate 旋转 -->
    <img src="../../../imgs/music2.png">
    <img src="../../../imgs/music1.png">
    <img src="../../../imgs/music0.png">
    <!-- 旋转中心点 -->
    <div class="xuanzhuan"></div>

    <!-- scale 缩放 -->
    <div class="suofang">
        <img src="../../../imgs/exo.jpg">
    </div>

     <!-- 综合写法 -->
     <div class="all">
        
     </div>
</body>
</html>